<template>
  <default-home-card icon="BoxPlotOutlined" title="全国校友捐赠分布">
    <a-spin :spinning="spinning" tip="图表加载中....">
      <div class="echarts-box">
        <div class="category-main" id="category-main"></div>
      </div>
    </a-spin>
  </default-home-card>
</template>
<script setup>
  import DefaultHomeCard from '/@/views/system/home/components/default-home-card.vue';
  import * as echarts from 'echarts';
  import { onMounted, ref } from 'vue';
  import './map/china';
  import { smartSentry } from '/@/lib/smart-sentry';
  import { Echarts } from '../../../../../api/echarts/echarts';
  const spinning = ref(true);
  onMounted(() => {
    Echarts.EchartsChinaInit().then((res) => {
      init(res.data);
    });
  });

  function init(data) {
    spinning.value = false;
    let list = [];
    list = data;
    var option = {
      toolbox: {
        show: true,
        orient: 'vertical',
        left: 'right',
        top: 'center',
        feature: {
          dataView: { readOnly: false },
          restore: {},
          saveAsImage: { type: 'png' },
        },
      },
      tooltip: {
        show: true,
        formatter: function (params) {
          return params.name + '：' + params.data['value'];
        },
      },
      toolbox: {
        show: true,
        feature: {
          mark: { show: true },
          dataView: { show: true, readOnly: false },
          restore: { show: true },
          saveAsImage: { show: true },
          dataView: {
            show: true,
            lang: ['预算分配', '关闭', '刷新'],
            optionToContent: function (param) {
              let table = '<table border="1" style="border-collapse: collapse;">';
              table += '<tr><th>名称</th><th>数额</th></tr>';
              data.forEach((item) => {
                table += `<tr><td style="padding: 8px;text-align: center;">${item.name}</td><td style=" padding: 8px;text-align: center;">${item.value}</td></tr>`;
              });
              table += '</table>';
              return table;
            },
          },
        },
        itemSize: 18,
        showTitle: false,
        tooltip: {
          show: true, // 是否展示提示组件
          formatter: '{b}', // 提示框显示内容，{a} 默认英文名称, {b} 默认中文名称
          formatter: function (param) {
            switch (param.name) {
              case 'dataView':
                return '<div>' + '数据视图' + '</div>';
                break;
              case 'restore':
                return '<div>' + '刷新' + '</div>';
                break;
              case 'saveAsImage':
                return '<div>' + '下载' + '</div>';
                break;
              default:
                break;
            }
          },
        },
      },
      visualMap: {
        itemWidth: 20,
        itemHeight: 100,
        text: ['高', '低'],
        showLabel: true,
        seriesIndex: [0],
        min: 0,
        max: 50000000,
        textStyle: {
          color: '#7B93A7',
        },
        bottom: 60,
        formatter: '{value}',
        left: 'left',
        top: 'bottom',
        text: ['高', '低'], // 文本，默认为数值文本
        calculable: true,
      },
      series: [
        {
          name: 'mapSer',
          type: 'map',
          // roam: true,
          zoom: 1.2,
          aspectScale: 0.75,
          itemStyle: {
            // 可以根据需要配置样式
          },
          map: 'china',
          label: {
            normal: {
              show: true,
              fontSize: 12,
            },
            emphasis: {
              show: true,
            },
          },
          data: list,
        },
      ],
    };
    let chartDom = document.getElementById('category-main');
    if (chartDom) {
      let myChart = echarts.init(chartDom);
      myChart.setOption(option);
    }
  }
</script>
<style lang="less" scoped>
  .echarts-box {
    display: flex;
    align-items: center;
    justify-content: center;
    .category-main {
      width: 100%;
      height: 500px;
      background: #fff;
    }
  }
</style>
